<template>
  <div>
    <span class="boominfo_option">
      <span  @click="shoucang">
        <img v-if="collection == 0" src="./../../../assets/img/collect.png" alt="">
        <p v-if="collection == 0">收藏</p>
         <img v-if="collection == 1" src="./../../../assets/img/collected.png" alt="">
        <p v-if="collection == 1">已收藏</p>
      </span>
    </span>
  </div>
</template>

<script>
import * as fetch from '@/api/fetch'
import { Toast } from 'vant'

export default {
  name: 'Options',
  props: {
    collection: {
      type: [Number, String],
      default: ''
    },
    vid: {
      type: Number | String,
      default: 0
    }
  },
  data () {
    return {

    }
  },
  methods: {
    async operateVideoByType () {
      console.log(this.vid)
      console.log(this.collection)
      const res = await fetch.operateVideoByType({
        vid: this.vid,
        type: 'collector'
      })
      console.log(res)
    },
    shoucang () {
      if (this.collection == 1) {
        this.operateVideoByType()
        this.collection = 0
        Toast('已取消收藏')
      } else {
        this.operateVideoByType()
        this.collection = 1
        Toast('收藏成功')
      }
    }
  },
  mounted () {
  },
  updated () {
  }
}
</script>

<style lang="less" scoped>
  .boominfo_option{
    width: 50px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  span{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    color: #acacac;
    margin-left: 10px;
  img{
    width: 26px;
    height: 26px;
    margin-bottom: 3px;
  }
  }
  }
</style>
